import React, { Component } from 'react'
import {connect} from "react-redux";
import { bindActionCreators } from "redux";
import { actions,getInfo } from '../../store/modules/Detail';
import { Swiper,Badge,TabBar,Button } from 'antd-mobile';
import "./Detail.less"
import {filterPrice} from "../../filters/index"
import {imgPre} from "../../request/http"
import Header from '../../components/Header/Header';
import {
    MessageOutline,
    UnorderedListOutline,
    TruckOutline
  } from 'antd-mobile-icons'
class Detail extends Component {
    constructor() {
        super();
        this.des = React.createRef();
    }
    componentDidMount() {
        let {
          det: { requestInfo },
          match: { params },
        } = this.props;
        requestInfo(params.id);
   
        
    }

    render() {
        const tabs=[
            {
              key: '1',
              title: '客服',
              icon: <MessageOutline />,
              badge: Badge.dot,
            },
            {
              key: '2',
              title: '店铺',
              icon: <UnorderedListOutline />,
              badge: '5',
            },
            {
              key: '3',
              title: '购物车',
              icon: <TruckOutline />,
              badge: '99+',
            },
            {
              key: '4',
              title: <Button color='warning' onClick={()=>addshop()}>加入购物车</Button>
            },
            {
                key: '5',
                title: <Button color='danger' >立即购买</Button>
              }
          ];
        let { info ,det:{addshop}} = this.props;

        let images=[];
        images.push(info.img);
        
        return (
            <div>
                <Header title={info.goodsname} back></Header>
                <div className="detail">
                    {/* 轮播图 */}
                    <Swiper style={{"--height":"4rem"}} 
                        indicator={(total, current) => (
                            <div className="customIndicator">
                                {`${current + 1} / ${total}`}
                            </div>
                        )}>
                        {images.map((item,ind) => {
                            return (
                                <Swiper.Item key={ind}>
                                    <img src={imgPre+item} alt="" />
                                </Swiper.Item>
                            );
                        })}
                    </Swiper>
                    <div>
                        <h3>{info.description}</h3>
                        <span>原价：{info.market_price?<del>{filterPrice(info.market_price)}</del>:null}</span>
                        <p><span>现价：{info.price}</span></p>
                    </div>
                    {/* 底部栏 */}
                    <TabBar>
                        {tabs.map(item => (
                            <TabBar.Item
                            key={item.key}
                            icon={item.icon}
                            title={item.title}
                            badge={item.badge}
                            />
                        ))}
                    </TabBar>
            </div>
        </div>
        )
    }
}

//取数据
const mapStateToProps = (state) => {
    return {
        info:getInfo(state)
    };
}

//取方法
const mapDispatchToProps = (dispatch) => {
    return {
      det: bindActionCreators(actions, dispatch),
    };
  };

export default connect(mapStateToProps,mapDispatchToProps)(Detail)